<template>
    <div class="image-mirroring" :style="{ width: width, height: height }" @mousemove="handleMouseMove" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @mouseleave="handleMouseUp" ref="container">
        <!-- 底层图片 -->
        <img :src="afterImage" :alt="afterAlt" class="base-image" />

        <!-- 上层图片（被裁切的） -->
        <div class="clip-container" :style="{ width: `${sliderPosition}px` }">
            <img :src="beforeImage" :alt="beforeAlt" class="clip-image" />
        </div>

        <!-- 拖动分割线 -->
        <div class="slider" :style="{ left: `${sliderPosition}px` }" @mousedown.stop="handleMouseDown">
            <div class="slider-line"></div>
            <div class="slider-button">
                <div class="arrow left"></div>
                <div class="arrow right"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
    beforeImage: {
        type: String,
        required: true
    },
    afterImage: {
        type: String,
        required: true
    },
    beforeAlt: {
        type: String,
        default: 'Before image'
    },
    afterAlt: {
        type: String,
        default: 'After image'
    },
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '400px'
    }
})

const container = ref(null)
const isDragging = ref(false)
const sliderPosition = ref(0)

onMounted(() => {
    // 初始化滑块位置在中间
    if (container.value) {
        sliderPosition.value = container.value.offsetWidth / 2
    }
})

const handleMouseDown = e => {
    isDragging.value = true
}

const handleMouseUp = () => {
    isDragging.value = false
}

const handleMouseMove = e => {
    if (!isDragging.value) return

    const containerRect = container.value.getBoundingClientRect()
    const newPosition = e.clientX - containerRect.left

    // 限制滑块在容器范围内
    if (newPosition >= 0 && newPosition <= containerRect.width) {
        sliderPosition.value = newPosition
    }
}
</script>

<style lang="scss" scoped>
.image-mirroring {
    position: relative;
    overflow: hidden;
    user-select: none;

    .base-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .clip-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        overflow: hidden;
        z-index: 1;

        .clip-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw; // 使用较大宽度确保图片填满
            height: 100%;
            object-fit: cover;
        }
    }

    .slider {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
        transform: translateX(-50%);
        z-index: 2;
        cursor: ew-resize;
        display: flex;
        justify-content: center;

        .slider-line {
            position: absolute;
            width: 2px;
            height: 100%;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        .slider-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;

            .arrow {
                position: absolute;
                width: 0;
                height: 0;
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;

                &.left {
                    left: 8px;
                    border-right: 8px solid #666;
                }

                &.right {
                    right: 8px;
                    border-left: 8px solid #666;
                }
            }
        }
    }
}
</style>
